<template>
    <div>
        <van-row @click="showLoginModal">
            <van-col span="6">
                <img :src="avatarSrc" alt />
            </van-col>
            <van-col span="14">{{nickname}}</van-col>
            <van-col span="4">
                <van-icon :name="logIcon" @click="toShowLogoutModal" />
            </van-col>
        </van-row>
        <van-grid :column-num="3" square>
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
        </van-grid>

        <!-- 登录弹出层 -->
        <van-popup v-model="isShowLoginModal">

            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="danger" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </van-popup>

        <!-- 退出登录确认框 -->
        <van-dialog v-model="isShowLogoutModal" title="登出确认框" show-cancel-button @confirm="Logout">
            <div style="text-align:center;padding:20px 0;">确定退出登录吗？</div>
        </van-dialog>
    </div>
</template>

<script>
import {ToLogin} from "@/request/api"
import avatarSrc from "../assets/avatar.png"
import {mapState,mapMutations} from "vuex"
export default {
    data () {
        return {
            avatarSrc,
            isShowLoginModal:false,
            username: '',
            password: '',
            nickname:"点击登录",
            logIcon:"arrow",
            isShowLogoutModal: false,
        }
    },
    created(){
        // 页面刷新，登录的头像，昵称都没了，
        // 所以需要页面刷新的时候，判断有没有登录， 有登录就把用户信息填到页面上
        let token = localStorage.getItem("token")
        if(token){
            let userInfo = JSON.parse(localStorage.getItem("userInfo"))
            this.avatarSrc = userInfo.avatar
            this.nickname = userInfo.nickname
            this.logIcon = "cross"
        }
    },
    computed:{
        ...mapState({
            isGoBack:state=>state.isGoBack.isGoBack
        })
    },
    methods:{
        ...mapMutations({
            chanIsGoBack:'isGoBack/chanIsGoBack'
        }),
        Logout(){
            // console.log("执行了Logout");
            // 退出登录效果。
            // 1、提示用户退出登录成功
            this.$toast.success("退出成功！");
            // 2、删除本地存储中的token值和用户常用信息
            localStorage.removeItem("userInfo");
            localStorage.removeItem("token");
            // 3、把页面上的用户基本信息还原回默认值.
            this.avatarSrc = avatarSrc;
            this.nickname = "点击登录";
            this.logIcon = "arrow";
            
            
        },
        toShowLogoutModal(){
            // 没有登录的时候要return
            let token = localStorage.getItem("token");
            if(!token)return;
            // 展示退出登录框
            this.isShowLogoutModal = true;
        },
        showLoginModal(){
            // 如果没有登录，才展示登录框
            // 如果有登录就直接return
            let token = localStorage.getItem("token");
            if(token)return;
            // 展示登录框
            this.isShowLoginModal = true
        },
        onSubmit(values) {
            // 点击登录按钮
            // console.log('submit', values["用户名"]);
            // console.log('submit', values["密码"]);
            // 发起登录请求
            ToLogin({
                username:values["用户名"],
                pwd:values["密码"]
            }).then(res=>{
                // 登录成功之后的业务逻辑：
                // 1、提示用户登录成功
                // 2、保存token值和用户常用信息到本地存储
                // 3、关闭登录窗口
                // 4、把用户基本信息渲染到页面上. 
                let userInfo = res.data.userInfo
                // 1、提示用户登录成功
                this.$toast.success("登录成功！")
                // 2、保存token值和用户常用信息到本地存储
                localStorage.setItem("token", res.data.token)
                localStorage.setItem("userInfo", JSON.stringify(userInfo))
                setTimeout(()=>{
                    // 3、关闭登录窗口
                    this.isShowLoginModal = false;
                    // 4、把用户基本信息渲染到页面上. 
                    this.avatarSrc = userInfo.avatar
                    this.nickname = userInfo.nickname
                    this.logIcon = "cross"

                    // 5、跳转到上一个界面
                    // 是不是所有情况都要回到上一次路由？？ 只有在强制要求登录的时候跳回去。
                    // 如果是用户直接点击我的页面的时候进行的登录的，不需要跳回去。
                    // 要区别的是：是不是强制过来/user的？？（而不是从哪个路由来的）  

                    // if(是不是强制过来的){
                    // 如果isGoBack为true，就要跳回去。
                    // 一开始把isGoBack设置为false。 强制登录的时候再改成true
                    // isGoBack 定义在Vuex中
                    if(this.isGoBack){
                        this.$router.go(-1);
                        // 又要把isGoBack改成false
                        this.chanIsGoBack(false);
                    }
                    
                },500)
                
                


            })

        },
    }
}
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.16rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup{
    width: 85%;
}
</style>